<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="copyright" content="www.apicloud.com" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>歌单</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<style>
html,body {min-height: 100%;background-color: #f9f9f9;}
.fr {float: right;}
.fl {float: left;}
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.ml5 {margin-left: 0.5em;}
.mr5 {margin-right: 0.5em;}
.hdivider {width: 100%; height: 1px;background-color: #e0e0e0;}
.br {border-right: 1px solid #e0e0e0;}
.pl10 {padding-left: 10px;}

.row {display: -webkit-box;display: -webkit-flex;}
.col {-webkit-box-flex:1; -webkit-flex:1; flex:1;margin: 0 5px; position: relative;}

.swiper-container img {width: 100%;}

/* 歌单标题 */
.sectionTitle {height: 2em; line-height: 2em; font-size: 1.12em;}
.sectionTitle .titleDivider {display: inline-block; height: 1.12em; width: 3px; vertical-align: top; background-color: #D43C33; margin-top: 0.44em; margin-left: 0.7em; margin-right: 0.3em;}
/* 歌单 */
.col .listcoverbar {position: absolute; top: 0; background-color: rgba(0,0,0,0.4); width: 100%;height: 1.2em;}
.col .listcoverbar span {color: #fff;}
.col .listcoverbar .earphone {width: 1em; margin-top: 0.2em; margin-right: 0.3em;}
.col .listcover {width: 100%;}
.col .listtitle {height: 2.4em; font-size: 1em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* item样式 */
.egret-item {height: 4em;}
.egret-item .egret-item-box-cover-center {display: table; height: inherit;}
.egret-item .egret-item-box-cover-center .egret-item-box-abtc {display: table-cell; vertical-align: middle;}
.egret-item .egret-item-box-cover-center .egret-item-box-abtc img {width: 3em; vertical-align: top;}
/* 右侧箭头样式 */
.egret-item .egret-item-arrow {display: table; height: inherit;}
.egret-item .egret-item-arrow .egret-item-box-abtc {display: table-cell; vertical-align: middle;}
.egret-item .egret-item-arrow .egret-item-box-abtc img {width: 0.8em; vertical-align: top;}
/* 中间shelf  两个条目*/
.egret-item .egret-item-shelf {height: inherit; }
.egret-item .egret-item-shelf .egret-item-shelf-title {font-size: 1.1em; margin-top: 0.6em;}
.egret-item .egret-item-shelf .egret-item-shelf-subtitle {font-size: 0.6em; color: #666; margin-top: 0.6em;}
/* 中间shelf 一个条目 */
.egret-item .egret-item-shelf-single {height: inherit; line-height: 4em;font-size: 1.1em;}
.egret-item .egret-item-shelf-redclassify {color: #E03F40; border:1px solid #E03F40; font-size: inherit;padding: 0.1em;border-radius: 1px;margin-right: 5px;}


/* 用flex重写框架 */
.egret-flex-item {display: -webkit-box;-webkit-box-align:center;height: 3em;/*background-color: #fff;*/}
/* 左部logo */
.egret-flex-item-logo {max-width: 50px; min-width: 50px; margin-left: 0.5em; margin-right: 0.2em;-webkit-box-flex: 1; -webkit-box-align: center;text-align: center;}
.egret-flex-item-logo img {height: 2em; width: 2em; -webkit-box-align: center;vertical-align: top;/*否则图片不会居中，底部仍然是会有空白*/}
/* 中间文本信息 */
.egret-flex-item-shelf {overflow: hidden; -webkit-box-flex:2; -webkit-box-align: center;}
.egret-flex-item-shelf div {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.egret-flex-item-shelf .egret-flex-item-shelf01 {font-size: 1.1em;}
.egret-flex-item-shelf .egret-flex-item-shelf02 {font-size: 0.6em; color: #666; margin-top: 0.6em;}
.egret-flex-item-shelf .egret-flex-item-redclassify {color: #E03F40; border: 1px solid #E03F40; font-size: inherit; padding: 0.1em; border-radius: 1px; margin-right: 5px;}

/* 右部箭头 */
.egret-flex-item-arrow {-webkit-box-flex: 1;max-width: 10px; min-width: 10px; margin-right: 15px;}
.egret-flex-item-arrow img {width: 100%; max-width: 10px;}

/* 暗头部 */
.egret-dark-title {height: 1.4em; line-height: 1.4em; font-size: 0.8em; background-color: #e7e7e7; color: #666; padding-left: 10px;}

/* special 对个别自定义 */
.special {height: 4em;}
.special .egret-flex-item-logo img  {height: 3em;width: 3em;}

/* */
.inputmusic {text-align: center;margin-top: 30px;}
.inputmusic p {color: #6F6F6F;}
.inputmusic p .inputbtn {color: #3A9DD3;text-decoration: underline;}

/* 独立条目 */
.isolateitem-top {margin-top: 10px; border-top: 1px solid #e0e0e0; }
.isolateitem-bottom {border-bottom: 1px solid #e0e0e0; }

/* 退出 */
.exitbtn {margin: 15px 10px;border-radius: 4px;border: 1px solid #D33A31;background-color: #fff;color: #D33A31;text-align: center;height: 2em;line-height: 2em;}


/* 个人用户标题 */
.musiclistprofile {height: 7em; background-color: #fff; }
.musiclistprofile .egret-flex-item-logo img {height: 6em; width: 6em; }
.musiclistprofile .egret-flex-item-logo {max-width: 6em; min-width: 6em; margin-left: 0.5em; margin-right: 0.2em; -webkit-box-flex: 1; -webkit-box-align: center; }
.musiclistprofile .egret-flex-item-shelf  {margin-left: 0.5em;}
.musiclistprofile .egret-flex-item-shelf .egret-flex-item-shelf01 {font-size: 1.5em; }
.musiclistprofile .egret-flex-item-shelf .egret-flex-item-shelf02 {margin-top: 1.6em;-webkit-box-align: center;display: -webkit-box;}
.musiclistprofile .egret-flex-item-shelf .egret-flex-item-shelf02 .createrlogo {width: 2em;}
.musiclistprofile .egret-flex-item-shelf .egret-flex-item-shelf02 .creatername {margin: 0 1em;}
.userinfo {display: -webkit-box;background-color: #fff;/*padding: 10px 0;*/}
.userinfo .userinfocol {/*-webkit-box-flex:1;*/padding: 10px 0;text-align: center;width: 25%;box-sizing: border-box;}
.userinfo .userinfocol .info {font-size: 0.8em;color: #999;}
.userinfo .userinfocol .info img {width: 2em;}
.userinfo .userinfocol .num {padding-top: 5px;}

/* 播放全部*/
.playall {background-color: #f9f9f9;}
.playall .egret-flex-item-arrow {-webkit-box-flex: 1; max-width: 2.0em; min-width: 2.0em; margin-right: 15px;}
.playall .egret-flex-item-arrow img {max-width: none;}
.playall .egret-flex-item-logo img {width: 1.5em;height: 1.5em;}

/* egret item 抽象右部 */
.egret-flex-item-abright {display: -webkit-box; -webkit-box-flex: 1; border-bottom: 1px solid #e0e0e0; -webkit-box-align: center;height: 4em;}

/* musiclist 特殊样式 */
.musiclist-item {height: 4em;}
.musiclist-item .egret-flex-item-logo {text-align: center;font-size: 1.2em;color: #999999;}
.musiclist-item .egret-flex-item-shelf .egret-flex-item-shelf01 {font-size: 1em;}
.musiclist-item .egret-flex-item-arrow {max-width: 24px; min-width: 24px;}
.musiclist-item .egret-flex-item-arrow img {max-width: none;}

/* 弹出工具条 */
.musiclist-item-tool {background-color: #303030;color: #fff;display: -webkit-box;padding: 0 10px;display: none;}
.musiclist-item-tool .userinfocol {-webkit-box-flex:1;text-align: center;padding: 5px 0;}
.musiclist-item-tool .userinfocol .info img {width: 50%;}
.musiclist-item-tool .userinfocol .num {color: #A8A8A8;font-size: 0.8em;}

/* 悬浮 */
.exitbtnhover {background-color: #d33a31;color: #fff;}
.userinfo .toolhover {background-color: #e2e2e2;}
.musiclist-item-tool .toolhover {background-color: #1d1d1d;}
.allplayhover {background-color: #e2e2e2;}

/* 头部背景 */
.musiclistprofile {height: 9em;}
.egret-flex-item .topheaderbg {width: 100%; height: 100%; vertical-align: top;}
.egret-flex-item .topheaderlogo {position: absolute;width: 50px;height: 50px;top: 30px;left: 20px;}
.egret-flex-item .topheadercollect {position: absolute; width: 50px; height: 50px; top: 70px; right: 20px; background-color: #76110B; border-radius: 25px;}
.egret-flex-item .topheadercollect .border {width: 100%;}
.egret-flex-item .topheadercollect .inside {position: absolute;width: 100%;bottom: 0;left: 0;}
.egret-flex-item .info {position: absolute; left: 20px; top: 70px; font-size: 0.6em; color: #fff;}
.egret-flex-item .info .bigword {color: #fff;font-size: 5em;vertical-align: top;}
.egret-flex-item .info .smallword {color: #fff;font-size: 2.2em;padding-top: 5px;}
.egret-flex-item .info .smallword div {color: #fff;font-size: 1em;}

</style>
</head>
<body>

<!-- 1 用户登录 -->
<div class="egret-flex-item musiclistprofile">
	<img src="../../image/frame0101cover/europe_cover.jpg" alt="" class="topheaderbg">
	<div class="topheadercollect">
		<img src="../../image/frame0101cover/cm2_pro_head_140.png" alt="" class="border">
		<img src="../../image/frame0101cover/cm2_mv_btn_fav.png" alt="" class="inside">
	</div>
	<div class="info">
		<span class="bigword">欧</span>
		<span class="smallword">美

		<div>最新单曲</div>
		</span>
	</div>
</div>

<!-- 2 播放全部 -->
<div class="egret-flex-item isolateitem-bottom playall" tapmode="allplayhover" onclick="openMusicPlay()">
	<div class="egret-flex-item-logo">
		<img src="../../image/musiclist/musiclistplay.png" alt="" class="">
	</div>
	<div class="egret-flex-item-shelf">
		<div class="egret-flex-item-shelf01">播放全部</div>
	</div>
</div>

<!-- 3  -->
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">怕寂寞</div>
			<div class="egret-flex-item-shelf02">雁卿 - Magic</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(0, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">暖风</div>
			<div class="egret-flex-item-shelf02">周传雄 - 说不出有多爱</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(1, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div><div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">我知道你都知道</div>
			<div class="egret-flex-item-shelf02">薛之谦 - 几个薛之谦</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(2, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">走过的路</div>
			<div class="egret-flex-item-shelf02">蔡健雅 - Goodbye &amp; Hello</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(3, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">恋着多喜欢</div>
			<div class="egret-flex-item-shelf02">梁静茹 - 恋着多喜欢 EP</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(4, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">回到最初</div>
			<div class="egret-flex-item-shelf02">蔡淳佳 - 回到最初</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(5, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">想对你说</div>
			<div class="egret-flex-item-shelf02">杨宗纬 - 初·爱</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(6, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">乘风</div>
			<div class="egret-flex-item-shelf02">王蓝茵 - 想飞 电视原声带</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(7, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">情书</div>
			<div class="egret-flex-item-shelf02">张学友 - 友情歌 1995-2000世纪情歌金选</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(8, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
<div class="egret-flex-item musiclist-item">
	<div class="egret-flex-item-abright">
		<div class="egret-flex-item-shelf pl10">
			<div class="egret-flex-item-shelf01">手套</div>
			<div class="egret-flex-item-shelf02">李泉 - 心世界</div>
		</div>
		<div class="egret-flex-item-arrow">
			<img src="../../image/musiclist/musiclistmore.png" alt="" class="toobarimg" onclick="expandlist(9, this)">
		</div>
	</div>
</div>
<div class="musiclist-item-tool" data-click='0' >
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool01.png" alt=""></div>
		<div class="num">收藏</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="downloadMusic()">
		<div class="info"><img src="../../image/musiclist/musiclisttool02.png" alt=""></div>
		<div class="num">下载</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="openMusiclistshare()">
		<div class="info"><img src="../../image/musiclist/musiclisttool03.png" alt=""></div>
		<div class="num">分享</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool04.png" alt=""></div>
		<div class="num">歌手</div>
	</div>
	<div class="userinfocol" tapmode="toolhover" onclick="">
		<div class="info"><img src="../../image/musiclist/musiclisttool05.png" alt=""></div>
		<div class="num">专辑</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
function collectmusic (clicktoolitem) {
	var toolbarlist = document.getElementsByClassName('collectmusic')[0];
	var click = clicktoolitem.getAttribute("data-click");

	if (click == 0) {
		// 点开
		clicktoolitem.setAttribute("data-click", 1);
		toolbarlist.src = "../../image/cm2_list_detail_icn_faved.png";
		api.toast({msg: '加入收藏', duration:1000, location: 'bottom'});
	}else {
		// 关闭
		clicktoolitem.setAttribute("data-click", 0);
		toolbarlist.src = "../../image/musiclist/musiclistcollect.png";
		api.toast({msg: '取消收藏', duration:1000, location: 'bottom'});
	}
}

function openMusicPlay () {
	api.openWin({
		name: 'musicplay',
		url: '../musicplay.html',
		delay:200
	});
}

function openMusiclistshare () {
	api.openFrame({
		name: 'musiclistshare',
		url: '../musiclist_share.html',
		delay:300,
		rect: {
			x: 0,
			y: 0,
			w: 'auto',
			h: 'auto'
		}
	});
}

function downloadAll () {
	api.confirm({
		title: '下载',
		msg: '下载本歌单全部音乐？',
		buttons:["确定", "取消"]
		},function(ret,err){
		if(ret.buttonIndex == 1){
			
		}
		else{	
		}
	});
}

function downloadMusic () {
	api.confirm({
		title: '下载',
		msg: '下载本首歌？',
		buttons:["确定", "取消"]
		},function(ret,err){
		if(ret.buttonIndex == 1){	
		}
		else{	
		}
	});

}

function expandlist (index, clickitem) {
	var toolbarlist = document.getElementsByClassName('musiclist-item-tool');
	var toolbarimg = document.getElementsByClassName('toobarimg');
	var clicktoolitem = toolbarlist[index];
	var click = clicktoolitem.getAttribute("data-click");

	// 复原其他tool，一次只打开一个tool
	for (var i = 0; i < toolbarlist.length; i++) {
		toolbarlist[i].setAttribute("data-click", 0);
		toolbarlist[i].style.display = 'none';
		toolbarimg[i].src = "../../image/musiclist/musiclistmore.png";
	}

	if (click == 0) {
		// 点开
		clicktoolitem.setAttribute("data-click", 1);
		clickitem.src = "../../image/musiclist/musiclistmore_prs.png";
		clicktoolitem.style.display = '-webkit-box';
	}else {
		// 关闭
		clicktoolitem.setAttribute("data-click", 0);
		clickitem.src = "../../image/musiclist/musiclistmore.png";
		clicktoolitem.style.display = 'none';
	}

}
apiready = function  () {}
</script>
</html>